<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YUOL周总结平台</title>
    <link rel="icon" href="../media/head/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/static/css/google-fonts.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/materialize.min.list.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/Material+Icons.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/font-awesome-4.7.0/css/font-awesome.min.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/editor.md-master/css/editormd.min.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/editor.md-master/css/editormd.logo.min.css" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css" charset="UTF-8">
    <script type="text/javascript" charset="UTF-8">
        document.addEventListener('visibilitychange', function () {
            if (document.visibilityState == 'hidden') {
                normal_title = document.title;
                document.title = '暂时离开一会哦|･ω･｀)';
            } else document.title = normal_title;
        });
    </script>
</head>
<body>
    <nav class="nav nav-active" style="background-color: #03a9f4;position: fixed;z-index: 999;">
        <div class="nav-wrapper">
            <a href="/" class="brand-logo waves-effect waves-light">
                &nbsp;周总结平台
            </a>
            <a href="#" data-target="mobile-nav" class="sidenav-trigger"><i class="material-icons">menu</i></a>
            <ul class="right hide-on-med-and-down" style="list-style-type: none;">
                <li><a href="/" class="waves-effect waves-light"><i class="material-icons left">home</i>主页</a></li>
                <li><a href="/archive/" class="waves-effect waves-light"><i class="material-icons left">archive</i>本周总览</a></li>
                <li><a href="/person_list/" class="waves-effect waves-light"><i class="material-icons left">list</i>个人总览</a></li>
                <li><a href="/article_upload/" class="waves-effect waves-light btn"><i class="material-icons left">publish</i>上传周总结</a></li>
                <li><a href="/login/" class="waves-effect waves-light btn"><i class="material-icons left">storage</i>登录</a></li>
                {% if request.user.is_authenticated %}
                <li><a href="javascript:void(0)" class="waves-effect waves-light btn" id="logout" onclick="logout()"><i class="material-icons left">exit_to_app</i>注销</a></li>
                {% endif %}
            </ul>
        </div>
    </nav>
    <!-- 移动端侧栏 -->
    <ul class="sidenav" id="mobile-nav" style="list-style-type: none;">
        <li><a href="/" class="waves-effect waves-light"><i class="material-icons left">home</i>主页</a></li>
        <li><a href="/archive/" class="waves-effect waves-light"><i class="material-icons left">archive</i>本周总览</a></li>
        <li><a href="/person_list/" class="waves-effect waves-light"><i class="material-icons left">list</i>个人总览</a></li>
        <li><a href="/article_upload/" class="waves-effect waves-light"><i class="material-icons left">publish</i>上传周总结</a></li>
        <li><a href="/login/" class="waves-effect waves-light"><i class="material-icons left">dns</i>登录</a></li>
        {% if request.user.is_authenticated %}
        <li><a href="javascript:void(0)" class="waves-effect waves-light" id="logout2" onclick="logout()"><i class="material-icons left">exit_to_app</i>注销</a></li>
        {% endif %}
    </ul>
    <script type="text/javascript" charset="UTF-8">
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.sidenav');
            var instances = M.Sidenav.init(elems, 'left');
        });
    </script>
    <div class="fixed-action-btn" style="bottom: 56px;">
      <a class="btn-floating btn-large red waves-effect waves-light" title="回到顶部" id="to-top">
        <i class="large material-icons">keyboard_arrow_up</i>
      </a>
    </div>
    <script type="text/javascript" charset="UTF-8">
        document.getElementById('to-top').onclick = function () {
            var timer = null;
            cancelAnimationFrame(timer);
            //获取当前毫秒数
            var startTime = +new Date();
            //获取当前页面的滚动高度
            var b = document.body.scrollTop || document.documentElement.scrollTop;
            var d = 180;
            var c = b;
            timer = requestAnimationFrame(function func(){
                var t = d - Math.max(0,startTime - (+new Date()) + d);
                document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
                timer = requestAnimationFrame(func);
                if(t === d){
                  cancelAnimationFrame(timer);
                }
            });
        };
    </script>

    <main id="main" class="main">
        <style type="text/css">
            #text {
                margin: 0 auto;
            }
            @media screen and (min-width: 1200px) {
                #text {
                    width: 60%;
                }
            }
            @media screen and (max-width: 1100px) {
                #text {
                    width: 92%;
                }
            }
            @media screen and (max-width: 800px) {
                #text {
                    width: 96%;
                }
            }
            @media screen and (max-width: 600px) {
                #text {
                    width: 100%;
                }
            }
            h1 {
                /*color: #555555;*/
            }
            h2 {
                color: #ff6868;
            }
        </style>
        <div id="text" class="card card-content hoverable">
            <div class="markdown-body editormd-preview-container editormd-html-preview">
                <h1>第{{ article.week }}周周总结</h1>
                    {% if doc is not None %}
                    <p>
                        <i class="fa fa-user fa-emoji" title="member"></i> <code>{{ article.member }}</code>
                        <i class="fa fa-tags fa-emoji" title="tags"></i> <code>第{{ article.week }}周</code>
                        <i class="fa fa-calendar fa-emoji" title="calendar"></i> <code>{{ article.upload_time|date:"Y-m-d" }}</code>
                        <i class="fa fa-file-word-o fa-emoji" title="file-word"></i> <code>Word文档</code>
                        <i class="fa fa-eye fa-emoji" title="eye"></i> <code>{{ article.click }}</code>
                        {% if article.top is True %}
                        <i class="fa fa-arrow-up fa-emoji" title="top"></i> <code>置顶</code>
                        {% endif %}
                        <i class="fa fa-download fa-emoji" title="download"></i>
                        <code>
                            <a class="blue-text" href="{{ article.doc.url }}" download="{{ article.member }}{{ article.year }}第{{ article.week }}周周总结.docx">
                                点击下载Word文档
                            </a>
                        </code>
                    </p>
                    <hr></hr>
                    {{ doc }}
                    <p>
                        <i class="fa fa-pencil fa-emoji" title="pencil"></i> <code>本文最后编辑时间: {{ article.edited_time|date:"Y-m-d" }}</code>
                    </p>
                    <hr></hr>
                {% endif %}
                {% if md is not None %}
                    <p>
                        <i class="fa fa-user fa-emoji" title="member"></i> <code>{{ article.member }}</code>
                        <i class="fa fa-tags fa-emoji" title="tags"></i> <code>第{{ article.week }}周</code>
                        <i class="fa fa-calendar fa-emoji" title="calendar"></i> <code>{{ article.upload_time|date:"Y-m-d" }}</code>
                        <i class="fa fa-file-text-o fa-emoji" title="file-markdown"></i> <code>Markdown文档</code>
                        <i class="fa fa-eye fa-emoji" title="eye"></i> <code>{{ article.click }}</code>
                        {% if article.top is True %}
                        <i class="fa fa-arrow-up fa-emoji" title="top"></i> <code>置顶</code>
                        {% endif %}
                        <i class="fa fa-download fa-emoji" title="download"></i>
                        <code>
                            <a class="blue-text" href="{{ article.md.url }}" download="{{ article.member }}{{ article.year }}第{{ article.week }}周周总结.md">
                                点击下载Markdown文档
                            </a>
                        </code>
                    </p>
                    <hr></hr>
                    <div id="preview"></div>
                    <p>
                        <i class="fa fa-pencil fa-emoji" title="pencil"></i> <code>本文最后编辑时间: {{ article.edited_time|date:"Y-m-d" }}</code>
                    </p>
                {% endif %}
            </div>
        </div>
    </main>

    <footer class="page-footer" style="background-color: #03a9f4;padding-top: 0;">
        <div class="footer-copyright">
            <div class="container">
                <a class="white-text" href="http://online.yangtzeu.edu.cn/">@ 2019 - 长江大学在线信息传媒</a>
            </div>
        </div>
    </footer>

    <script src="/static/js/materialize.min.js" charset="UTF-8"></script>
    <script src="/static/js/jquery-3.3.1.min.js" charset="UTF-8"></script>
    <script src="/static/editor.md-master/editormd.min.js" charset="UTF-8"></script>
    <script src="/static/editor.md-master/lib/marked.min.js" charset="UTF-8"></script>
    <script type="text/javascript" charset="UTF-8">
        function logout() {
            $.ajax({
                type: "POST",
                url: "/api_logout/",
                data: {
                    signal: "OUT"
                },
                dataType: "json",
                success: function (data) {
                    if (data.status === "OK") {
                        //console.log(data);
                        alert('注销成功');
                        window.location.reload();
                    } else if (data.status === "WTF") {
                        alert('注销过程中出了一点问题');
                    }
                },
                error: function (jpXHR) {
                    alert("Status Code: " + jpXHR.status);
                },
            });
        }
    </script>
    {% if md is not None %}
    <script type="text/javascript" charset="UTF-8">
        $.get('{{ article.md.url }}', function (markdown) {
            var preview = editormd.markdownToHTML('preview', {
                markdown: markdown,
                emoji: true,
                taskList: true,
                tocTitle: "Content",
                tocm: true,
                tex: true,
                codeFold: true,
                htmlDecode: "style, script, iframe",
                saveHTMLToTextarea : true,
                flowChart: true,
                sequenceDiagram: true,
            });
            // alert(markdown);
        });
    </script>
    {% endif %}
</body>
</html>